import React from 'react';
import { Select } from 'antd';
import { apiPrefix } from 'shared/api';
import Axios from 'axios';
import QueryButton from '../QueryButton';

import './index.less';

class CertificateInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      certificateTypes: [],
      selectedItems: [],
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/certificate/types`;
    Axios.get(api)
      .then((response) => {
        const arr = response.data.data;
        const types = [];
        for (let i = 0; i < arr.length; i++) {
          types.push(arr[i].fullname);
        }
        this.setState({ certificateTypes: types });
      });
  }
  handleChange = (selectedItems) => {
    this.setState({ selectedItems });
    console.log(selectedItems);
  };
  render() {
    const { selectedItems, certificateTypes } = this.state;
    const filteredOptions = certificateTypes.filter(o => !selectedItems.includes(o));
    console.log(filteredOptions);
    return (
      <section className="certificate-input">
        <div>
          <span>证书类型</span>
          <Select
            mode="multiple"
            placeholder="选择"
            value={selectedItems}
            onChange={this.handleChange}
            style={{ width: 400 }}
          >
            {filteredOptions.map((item, index) => (
              <Select.Option key={index} value={item}>
                {item}
              </Select.Option>
        ))}
          </Select>
        </div>
        <div>
          <QueryButton />
        </div>
      </section>

    );
  }
}

export default CertificateInput;
